import React, { Component } from 'react';

import { Container, Header, Content, Icon, Accordion, Text, View } from 'native-base';
const dataArray = [
  {
    title   : 'First Element',
    content : [ 'Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet' ]
  },
  { title: 'Second Element', content: 'Lorem ipsum dolor sit amet' },
  { title: 'Third Element', content: 'Lorem ipsum dolor sit amet' }
];
export default class AccordionExample extends Component {
  _renderHeader(item, expanded) {
    return (
      <View
        style={{
          flexDirection   : 'row',
          padding         : 10,
          justifyContent  : 'space-between',
          alignItems      : 'center',
          backgroundColor : '#A9DAD6'
        }}
      >
        <Text style={{ fontWeight: '600' }}> {item.title}</Text>
        {expanded ? (
          <Icon style={{ fontSize: 18 }} name='remove-circle' />
        ) : (
          <Icon style={{ fontSize: 18 }} name='add-circle' />
        )}
      </View>
    );
  }
  _renderContent(item) {
    if (Array.isArray(item.content)) {
      let contents = item.content.map((content, index) => (
        <Text
          style={{
            backgroundColor : '#e3f1f1',
            padding         : 10,
            fontStyle       : 'italic'
          }}
          key={index}
        >
          {content}
        </Text>
      ));
      return contents;
    } else {
      return (
        <Text
          style={{
            backgroundColor : '#e3f1f1',
            padding         : 10,
            fontStyle       : 'italic'
          }}
        >
          {item.content}
        </Text>
      );
    }
  }
  render() {
    return (
      <Container>
        <Header />
        <Content padder>
          <Accordion
            dataArray={dataArray}
            icon='add'
            expandedIcon='remove'
            iconStyle={{ color: 'green' }}
            expandedIconStyle={{ color: 'red' }}
            headerStyle={{ backgroundColor: '#b7daf8' }}
            contentStyle={{ backgroundColor: '#ddecf8' }}
            // expanded={0}
          />
        </Content>
        <Header />
        <Content padder style={{ backgroundColor: 'white' }}>
          <Accordion
            dataArray={dataArray}
            animation={true}
            expanded={true}
            renderHeader={this._renderHeader}
            renderContent={this._renderContent}
          />
        </Content>
      </Container>
    );
  }
}
